<template>
	<a-layout-header>
		<a-row justify="space-between" align="center">
			<a-space :size="25" style="padding-left: 11%;padding-top: 1%;">
				<div id="content">
					<div id="title">
						<i class="web-font" style="font-size: 25px;">
							<slot name="title"></slot>
						</i>
						<i class="web-font detail" style="font-size: 10px;">
							<slot name="detail"></slot>
						</i>
						<div id="operation">
							<i class="web-font" style="font-size: 10px;">
								<a-space :size="10">
									<a-button type="primary" id="preBtn" shape="circle" size="mini"
										:disabled="preBtnStatus" @click="preMessage()">
										<icon-left />
									</a-button>
									<a-button type="primary" id="nextBtn" shape="circle" size="mini"
										:disabled="nextBtnStatus" @click="nextMessage()">
										<icon-right />
									</a-button>
								</a-space>
							</i>
						</div>
					</div>
					<div id="content-images">
						<a-image-preview-group infinite>
							<a-space :size="10">
								<div style="border-radius: 5px;padding-bottom:20%;background-color: #fff;"
									v-for="(recommendItem,index) in formatrecommendsList" :key="index">
									<a-link v-if="recommendItem.isModel == 0 || recommendItem.isModel == 1" 
									:href="'/modelEvaluating/' + recommendItem.id" :hoverable="false"
										draggable="false">
										<a-image class="recommend-effect" :src="recommendItem.src" width="220"
											height="130" :preview="false" :title="recommendItem.title"
											draggable="false" />
									</a-link>
									<a-link v-else-if="recommendItem.isModel == 2"
									:href="recommendItem.href" :hoverable="false"
										draggable="false">
									<a-image class="recommend-effect" :src="recommendItem.src" width="220"
											height="130" :preview="false" :title="recommendItem.title"
											draggable="false" />
									</a-link>
								</div>
							</a-space>
						</a-image-preview-group>
					</div>
				</div>
			</a-space>
		</a-row>
	</a-layout-header>
</template>

<script setup>
	import {
		ref,
		reactive,
		getCurrentInstance,
		onMounted
	} from 'vue';
	
	import indexApi from '@/module/index/api/index.js';

	const props = defineProps({
		beginIndex: Number,
		endIndex: Number,
		total: Number,
		formatrecommendsList: Array
	});

	const emit = defineEmits();

	let {
		proxy
	} = getCurrentInstance();

	let preBtnStatus = ref(true);
	let nextBtnStatus = ref();
	let PbeginIndex = ref(props.beginIndex);
	let PendIndex = ref(props.endIndex);
	let newsList = reactive({});
	let count = ref(0);

	function preMessage() {
		PendIndex.value = PbeginIndex.value;
		if (props.total - PbeginIndex.value > 0 && PbeginIndex.value >= 7) {
			if (PbeginIndex.value == 7) {
				console.log('pre不足5个数据');
				PbeginIndex.value = PbeginIndex.value - (props.total - PbeginIndex.value + 1);
				nextBtnStatus.value = false;
			} else {
				console.log('pre有5个数据');
				PbeginIndex.value = PbeginIndex.value - 5;
				nextBtnStatus.value = false;
				if (PbeginIndex.value == 7)
					preBtnStatus.value = true;
			}
			props.formatrecommendsList.slice(PbeginIndex.value, PendIndex.value);
		} else {
			preBtnStatus.value = true;
			nextBtnStatus.value = false;
		}
		console.log('pre-beginIndex:', PbeginIndex.value);
		console.log('pre-endIndex:', PendIndex.value);
		//把索引传到父组件
		emit("indexData", {
			'PbeginIndex': PbeginIndex.value,
			'PendIndex': PendIndex.value,
			'Ptotal': props.total
		});
	}

	function nextMessage() {
		console.log('props', props);
		console.log('Ptotal', props.total);
		PbeginIndex.value = PendIndex.value;
		if (props.total - PendIndex.value >= 1 && PbeginIndex.value >= 7) {
			if (props.total - PendIndex.value > 1) {
				console.log('next有5个数据');
				PendIndex.value = PbeginIndex.value + 5;
				preBtnStatus.value = false;
				if (props.total <= PendIndex.value)
					nextBtnStatus.value = true;
			} else {
				console.log('next不足5个数据');
				PendIndex.value = PbeginIndex.value + (props.total - PendIndex.value);
				nextBtnStatus.value = true;
				preBtnStatus.value = false;
			}
			props.formatrecommendsList.slice(PbeginIndex.value, PendIndex.value);
		} else {
			preBtnStatus.value = false;
			nextBtnStatus.value = true;
		}
		console.log('next-beginIndex:', PbeginIndex.value);
		console.log('next-endIndex:', PendIndex.value);
		//把索引传到父组件
		emit("indexData", {
			'PbeginIndex': PbeginIndex.value,
			'PendIndex': PendIndex.value,
			'Ptotal': props.total
		});
	}
	
	async function loadingNewsList() {
		newsList.resp = await indexApi.getNewsList();
		count.value = newsList.resp.total;
		if(count.value <= 12){
			nextBtnStatus.value = true;
		}
		else if(count.value > 12){
			nextBtnStatus.value = false;
		}
		return newsList;
	}

	onMounted(() => {
		loadingNewsList();
	});
</script>

<style lang="less" scoped>
	@import '@/assets/index/css/recommendList.less';
</style>
